<!doctype html>
<html lang="zh_en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MutationObserver</title>
</head>
<body>
    <div id="content" data-t="ggggaaaaaa">66666</div>
    <div id="test"></div>
</body>
<script>
	let time = 4;
	let arr = new Array(time);
	let content = document.getElementById('content');
	let mutationObserver = new MutationObserver(obsCallback);
	obs();

	function obstruct() {
		for (let i = 0; i < arr.length; i++) {
			arr[i] = `<div>${i}</div>`;
		}

		arr.map((item, idx) => {
			for(let i = 0; i < 3000; i++) console.log(1)
			content.innerHTML += item;
		});

		//				document.body.clientLeft
//				for (let i = 0; i < 1000; i++) {console.log(i)}
//			arr[idx] = null;
//			console.log(idx)
        /*setTimeout(function () {
         //				content.innerHTML += item;
         //				document.body.clientLeft
         //				for (let i = 0; i < 1000; i++) {console.log(i)}
         arr[idx] = null;
         console.log(idx)
         }, idx * 500)*/

//		checkPass();
//		observer()
	}

	function checkPass() {
		let time = setInterval(function () {

			let flag = true;
			arr.map(item => {
				if (item) flag = false
			});
			console.log(flag ? `全部完成！！！` : `还有未完成的dom...`)
			if (flag) {
				clearInterval(time);
				let dom = document.createElement('div');
				dom.innerHTML = `<span>加载完成!</span>`
				document.body.appendChild(dom)
			}
		}, 100)
	}

	function editContent() {
		const content = document.getElementById('content');
//		takeRecords_TEST()
		console.log(1);
		obs();
//		observer(); // 订阅
		content.style.background = 'lightblue';
		content.style.background = 'red';
		console.log(2);
		content.innerHTML = 4433;
		console.log(3);
		const a = mutationObserver.takeRecords()
		console.log(a)
        /*
         type：如果是属性变化，返回"attributes"，如果是一个CharacterData节点（Text节点、Comment节点）变化，返回"characterData"，节点树变化返回"childList"
         target：返回影响改变的节点
         addedNodes：返回添加的节点列表
         removedNodes：返回删除的节点列表
         previousSibling：返回分别添加或删除的节点的上一个兄弟节点，否则返回null
         nextSibling：返回分别添加或删除的节点的下一个兄弟节点，否则返回null
         attributeName：返回已更改属性的本地名称，否则返回null
         attributeNamespace：返回已更改属性的名称空间，否则返回null
         oldValue：返回值取决于type。对于"attributes"，它是更改之前的属性的值。对于"characterData"，它是改变之前节点的数据。对于"childList"，它是null
        */
		const newNode = document.createElement('p');
		newNode.innerHTML = 888888;
		content.appendChild(newNode);
        console.log(4);
    }



//	obstruct();
//	editContent()

	// 完成创建
    function obsCallback(mutations, observer) {
	    console.log(`创建完成!`);
	    console.log(observer); // 观察者实例
	    console.log(mutations); // 变动数组
	    mutations.forEach((mutation, key) => {
            if (mutation.target.contentEditable === 'true') {
            	mutation.target.setAttribute('contenteditable', 'false');
            }
	    	/*if (mutation['attributeName'] === 'contenteditable' && mutation['oldValue'] === 'false')
	    		mutation.target.setAttribute('contenteditable', 'false');*/
        })
    }

    function obs() {
	    mutationObserver.observe(content, {
//		    attributes: true, // Boolean - 观察目标属性的改变
//		    characterData: true, // Boolean - 观察目标数据的改变(改变前的数据/值)
//		    childList: true, // Boolean - 观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
//		    subtree: true, // Boolean - 目标以及目标的后代改变都会观察
//		    attributeOldValue: true, // Boolean - 如果属性为true或者省略，则相当于设置为true，表示需要记录改变前的目标属性值，设置了attributeOldValue可以省略attributes设置
//		    characterDataOldValue: true, // Boolean - 如果characterData为true或省略，则相当于设置为true,表示需要记录改变之前的目标数据，设置了characterDataOldValue可以省略characterData设置
            attributeFilter: ['contenteditable'] // Array - 观察指定属性
	    });
    }

	function observer() {
		let test = document.getElementById('test');
        mutationObserver = new MutationObserver((mutations, observer) => {
			console.log(observer); // 观察者实例
			console.log(mutations); // 变动数组
            let len = 0;
			mutations.forEach(function(mutation, idx) {
				console.log(mutation);
				if (idx > 1) {

				}

//				if (mutation.addedNodes.length >= 7) mutationObserver.disconnect()
			});
		});

		var a = mutationObserver.takeRecords()
        console.log(a)

		mutationObserver.observe(content, {
			attributes: true, // Boolean - 观察目标属性的改变
			characterData: true, // Boolean - 观察目标数据的改变(改变前的数据/值)
			childList: true, // Boolean - 观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
			subtree: true, // Boolean - 目标以及目标的后代改变都会观察
			attributeOldValue: true, // Boolean - 如果属性为true或者省略，则相当于设置为true，表示需要记录改变前的目标属性值，设置了attributeOldValue可以省略attributes设置
			characterDataOldValue: true, // Boolean - 如果characterData为true或省略，则相当于设置为true,表示需要记录改变之前的目标数据，设置了characterDataOldValue可以省略characterData设置
			// attributeFilter: ['src', 'class'] // Array - 观察指定属性
		});

		/*

		 1. attributeFilter/attributeOldValue 优先级高于 attributes
		 2. characterDataOldValue 优先级高于 characterData
		 3. attributes/characterData/childList （或更高级特定项）至少有一项为true
		 4. 特定项存在, 对应选项必须为true或忽略
		 */

    }

</script>
</html>
